<!--聊天管理-->
<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <!--筛选、导入导出-->
      <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
        <a-form layout="inline">
          <a-form-item label="直播时间">
            <a-range-picker
              :defaultValue="[moment(searchParams.bgTm, dateFormat), moment(searchParams.endTm, dateFormat)]"
              :format="dateFormat"
              @change="onChange"
            ></a-range-picker>
          </a-form-item>
          <a-form-item label="直播名称">
            <a-input v-model="searchParams.keywords"></a-input>
          </a-form-item>
          <a-form-item label="是否回复">
            <a-select v-model="searchParams.replyContentHas" allowClear style="width: 200px">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">否</a-select-option>
              <a-select-option value="1">是</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!--列表-->
      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="pagination" :loading="loading"
               @change="getTableData"
      >
        <template slot="consultants" slot-scope="text, record">
          <span v-if="record.consultants===0">
              张三
          </span>
        <span v-else>
              李四
            </span>
      </template>

        <!--<template slot="replyId" slot-scope="text, record">-->
          <!--<span v-if="record.replyId===0">-->
              <!--导师一-->
          <!--</span>-->
          <!--<span v-else>-->
              <!--导师二-->
            <!--</span>-->
        <!--</template>-->

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleUpdate(record)" v-if="record.replyContent==''||record.replyContent==null" href="javascript:;">回复</a>
            <a-divider type="vertical" v-if="record.replyContent==''||record.replyContent==null"/>
            <a href="javascript:;" @click="showConfirm(record)">删除</a>
          </template>
        </span>
      </a-table>
      <!--新增/编辑弹窗-->
      <a-modal  :maskClosable="false"
                title="回复"
                :width="1000"
                @ok="replyData()"
                v-model="mdl.visible"
                :confirm-loading="replyloading"
      >
        <a-form>
          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="咨询内容"
          >
            <a-textarea :rows="4" v-model="mdl.formData.consultantsContent"/>
          </a-form-item>
          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="回复内容"
          >
            <a-textarea :rows="4" v-model="mdl.formData.replyContent"/>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
/* eslint-disable */
  import moment from 'moment';
  import InfoPopup from './infoPopup'
  import {queryinfoChatManag,deleteInfoChatManag,editInfoChatManag} from '@/api/messageManage/chatManage'

  export default {
    components: {
      InfoPopup
    },
    data() {
      return {
        replyloading: false,
        dateFormat: 'YYYY-MM-DD',
        /*   -------搜索框--------*/
        searchParams: {
          selected:'live_broadcast_name',
          keywords:'',
          bgTm: '',
          endTm: '',
          createBy: '',
          replyId:"",//回复账号
          consultants:"",//咨询人
          replyContentHas:"",//是否回复
        },

        /*   -------分页--------*/
        pagination: this.$defaultSettings.pagination ,

        /*   -------弹窗--------*/
        mdl: {
          visible: false,
          formData: {
//            consultants: '',
//            consultantsContent: '',
//            createDept: '',
//            createTime: '',
//            createUser: '',
//            id: '',
//            isDeleted: '',
//            liveBroadcastName: '',
//            liveTime: '',
//            replyContent: '',
//            replyId: '',
//            status: '',
//            updateTime: '',
//            updateUser: ''
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          },
          formItemLayoutWithOutLabel: {
            wrapperCol: {
              xs: { span: 24, offset: 0 },
              sm: { span: 20, offset: 4 },
            },
          },
        },


        /*   -------表格--------*/
        loading: false,
        columns:[
          {
            title: '直播名称',
            dataIndex: 'liveBroadcastName'
          },
          {
            title: '直播时间',
            dataIndex: 'liveTime'
          },
          {
            title: '咨询人',
            dataIndex: 'consultants',
            scopedSlots: { customRender: 'consultants' },
          },
          {
            title: '咨询内容',
            dataIndex: 'consultantsContent'
          },
          {
            title: '回复内容',
            dataIndex: 'replyContent'
          },
//          {
//            title: '回复账号',
//            dataIndex: 'replyId',
//            scopedSlots: { customRender: 'replyId' },
//          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: {customRender: 'action'}
          }
        ],
        data:[],

        // 下载
        downloadLoading: false,
      }
    },
    inject: ['upShow'],
    filters: {

    },
    created() {

    },
    computed: {

    },
    mounted() {
      this.getTableData(this.pagination)
    },
    methods: {
      moment,
      onChange(dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1]);
        this.searchParams.bgTm = dateStrings[0];
        this.searchParams.endTm = dateStrings[1];
      },
      getTableData(pagination) {
        this.pagination=pagination
        this.loading = true
        const parameter = {
          _search: true,//是否分页查询
          bgTm:this.searchParams.bgTm,
          createBy:"",
          data:{},
          endTm:this.searchParams.endTm,
          keywords:this.searchParams.keywords,
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          selected:this.searchParams.selected,
          selectedType:"",
          status:"",
          type:"",
          replyContentHas:this.searchParams.replyContentHas,
          replyId:'',
          consultants:this.searchParams.consultants,
        }
        queryinfoChatManag(parameter).then(res => {
          this.loading = false
          this.pagination.total = res.data.total
          this.data = res.data.records
        }).
        catch(err => {
          this.loading = false
        })
      },
      handleSearch() {
        this.pagination.current = 1
        this.pagination.pageSize = 10
        this.getTableData()
      },
//      点击回复
      replyData(){
        this.replyloading = true
        editInfoChatManag(this.mdl.formData).then(res => {
          this.replyloading = false
          if(res.code === 200){
            this.upShow(1,"回复成功")
            this.mdl.visible = false
            this.getTableData()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.replyloading = false
          this.upShow(2)
        })
      },
      //回复当前行
      handleUpdate(row) {
//        console.log("这一行", row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.visible = true
      },

//      删除
      handleDelete(row) {
        deleteInfoChatManag(row.id).then(res => {
          if(res.code === 200) {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      },
      showConfirm(val) {
        let self = this;
        this.$confirm({
          title: '删除该条聊天记录?',
          content: '确定删除该条聊天记录',
          onOk() {
            self.handleDelete(val)
          },
          onCancel() {},
        });
      },
    }
  }
</script>

<style scoped>

</style>
